<template>
  <div>
    <el-card>
      <!--操作区域 -->
      <el-row type="flex" justify="space-between">
        <div>
          <!--表单筛选 -->
          <el-form label-width="80px" :inline="true" size="normal">
            <el-form-item>
              <el-time-picker
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small">搜索</el-button>
              <el-button size="small">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button
            @click="delRow"
            type="warning"
            plain
            size="small"
            v-if="checkId.length"
            >删除</el-button
          >
          <el-button type="primary" plain size="small">刷新</el-button>
        </div>
      </el-row>
      <br />
      <!--表格区域-->
      <el-table :data="list" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          prop="username"
          label="登录名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ip"
          label="登录IP"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="browser"
          label="客户端"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="os"
          label="系统"
          align="center"
        ></el-table-column>
        <el-table-column prop="" label="登录状态" align="center">
          <template slot-scope="{ row }"
            >
            <el-button type="success" plain disabled v-if="row.status" size="small">正常</el-button>
            <el-button v-else type="danger" plain disabled size="small">异常</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="login_at"
          label="登录时间"
          align="center"
        ></el-table-column>
      </el-table>
      <!--分类区域 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="queryData.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      >
      </el-pagination>
    </el-card>

  </div>
</template>

<script>

import { getloginlogListApi, delloginlogApi } from "@/api/loginlog";
export default {
  data() {
    return {
      list: [],
      checkId: [],
      queryData: {
        page: 1,
        limit: 10,
      },
      totalNum: 0,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      const { list, total } = await getloginlogListApi(this.queryData);
      console.log(list);
      this.list = list;
      this.totalNum = total;
    },
    // 分页部分
    sizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },
    currentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 全选部分
    async handleSelectionChange(selection) {
      // 拿到选中的Id
      const newList = selection.map((item) => item.id);
      this.$nextTick()
      this.checkId = newList
      console.log(this.checkId)
    },
    // 删除
    async delRow() {
      try {
      await  this.$confirm('确定要删除吗')
      } catch (error) {
        return console.log(error)
      }
      await delloginlogApi({ id:this.checkId });
      this.initData();
      this.$message.success("删除成功");
    },
   
  },
};
</script>

<style scoped>
</style>

